import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import axios from 'axios';
import appState from '../../store/app-state';

@inject('appState') @observer
export default class TopicList extends Component {
  constructor() {
    super();
    this.changeName = this.changeName.bind(this);
  }

  componentDidMount() {
    // do something here
  }

  asyncBootstrap() {
    // this.props.appState.getPorts([1, 2, 3, 4, 5]);
    // this.props.appState.changeName('pingping');
    return new Promise((resolve, reject) => {
      axios.post('http://192.168.30.166:8889/c/orders/base/basicEnum', {}).then(res => {
        if (res.status === 200 && res.data.msg === 'success') {
          this.props.appState.getPorts(res.data.data);
        }
        resolve(true);
      }).catch(err => {
        reject(err)
      })
    })
  }

  changeName(e) {
    this.props.appState.changeName(e.target.value)
  }

  render() {
    const { ports, name } = this.props.appState;
    const s = ports.slice();
    const a = s.map(p => {
      return <div key={p.id}>{p.name}</div>
    })
    return (
      <div>
        <Helmet>
          <title>Hello Word</title>
          <meta name="description" content="description" />
        </Helmet>
        <input type='text' onChange={this.changeName} />
        <span>{name}</span>
        <div>{a}</div>
      </div>
    )
  }
}

TopicList.propTypes = {
  appState: PropTypes.instanceOf(appState),
}
